<template>
  <div>
    <div class="fan-item" v-for="(item, index) in fanList" :key="index">
      <img
        src="https://www.hualigs.cn/image/60364a03036ce.jpg"
        class="avatar"
      />
      <div class="introduce">
        <p class="basic-info">
          <span class="name">
            {{ item.name }}
          </span>
          <span class="sex" :style="{ backgroundColor: item.color }"
            >{{ item.sex }} <span class="age">{{ item.age }}</span></span
          >
        </p>
        <p>
          <span class="city">
            {{ item.city }}
          </span>
        </p>
      </div>
      <div class="whether-fan">
        {{ item.time }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FanInfo",
  props: {},
  data() {
    return {
      fanList: [
        {
          name: "小明",
          sex: "♂",
          sexColor: "#97BCEF",
          age: 22,
          city: "上海",
          time: "2020-01-02"
        },
        {
          name: "张三",
          sex: "♂",
          sexColor: "#97BCEF",
          age: 19,
          city: "北京",
          time: "2020-01-02"
        },
        {
          name: "李四",
          sex: "♂",
          sexColor: "#97BCEF",
          age: 36,
          city: "广州",
          time: "2020-01-02"
        },
        {
          name: "王五",
          sex: "♂",
          sexColor: "#97BCEF",
          age: 25,
          city: "深圳",
          time: "2020-01-02"
        },
        {
          name: "小红",
          sex: "♀",
          sexColor: "hotpink",
          age: 50,
          city: "南京",
          time: "2020-01-02"
        }
      ]
    };
  }
};
</script>

<style scoped>
.fan-item {
  width: 98%;
  margin-left: 1%;
  height: 50px;
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
  position: relative;
}
.avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 15%;
  position: absolute;
  top: 10%;
  left: 5%;
}
.introduce {
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 18%;
}
.introduce .basic-info {
  margin-top: 10%;
}
.introduce .name {
  font-size: 14px;
}
.introduce .sex,
.sexo {
  display: inline-block;
  width: 2rem;
  text-align: center;
  color: white;
  border-radius: 0.125rem;
  margin-left: 0.2rem;
  font-size: 12px;
  height: 0.9rem;
  line-height: 0.9rem;
}
.introduce .sex {
  background-color: #97bcef;
}
.introduce .sexo {
  background: hotpink;
}
.introduce .city {
  font-size: 12px;
  position: absolute;
  top: 60%;
}

.whether-fan {
  display: inline-block;
  position: absolute;
  width: 80px;
  right: 0.4rem;
  top: 0.8rem;
  font-size: 12px;
  height: 1.5rem;
  line-height: 1.5rem;

  text-align: center;
  color: #b9b9b9;
}
</style>
